<template>
    <div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
            <el-form-item label="id" prop="id">
                <el-input v-model="ruleForm.id" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="姓名" prop="name">
                <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="身份证号" prop="idNumber">
                <el-input v-model="ruleForm.idNumber"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sexName">
                <el-input v-model="ruleForm.sexName"></el-input>
            </el-form-item>
            <el-form-item label="年龄" prop="age">
                <el-input v-model.number="ruleForm.age"></el-input>
            </el-form-item>
            <el-form-item label="商铺所属省份" prop="provinceName">
                <el-input v-model="ruleForm.provinceName"></el-input>
            </el-form-item>
            <el-form-item label="商铺所属市" prop="cityName">
                <el-input v-model="ruleForm.cityName"></el-input>
            </el-form-item>
            <el-form-item label="商铺所属县(区)" prop="districtName">
                <el-input v-model="ruleForm.districtName"></el-input>
            </el-form-item>
            <el-form-item label="商铺详细地址" prop="detail">
                <el-input v-model="ruleForm.detail"></el-input>
            </el-form-item>
            <el-form-item label="商铺地址附加说明" prop="label">
                <el-input v-model="ruleForm.label"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
                <el-input v-model="ruleForm.phone"></el-input>
            </el-form-item>
            <el-form-item label="图片" prop="image">
                <el-input v-model="ruleForm.image"></el-input>
            </el-form-item>
            <el-form-item label="商铺名" prop="storeName">
                <el-input v-model="ruleForm.storeName"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">更新</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import {updateOne} from '@/utils/modules/marketer.js'
export default {
    props: ['rowData'],
    watch: {
        rowData: {
            handler: function (newVal) {
                this.ruleForm = JSON.parse(newVal)
                if (this.ruleForm.sex == 1) {
                    this.ruleForm.sexName = '男'
                } else {
                    this.ruleForm.sexName = '女'
                }
            },
            immediate: true,
            deep: true
        }
    },
    data() {
        var validateSex = (rule, value, callback) => {
            if (value == '') {
                callback(new Error('请输入性别'))
            } else if (value == '男') {
                this.ruleForm.sex = 1
                callback()
            } else if (value == '女') {
                this.ruleForm.sex = 0
                callback()
            } else {
                callback(new Error('请输入“男”或者“女”'))
            }
        }
        return {
            ruleForm: {},
            rules: {
                name: [
                    { required: true, message: '请输入姓名', trigger: 'blur' },
                    { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
                ],
                idNumber: [
                    { required: true, message: '请输入身份证号', trigger: 'blur' },
                ],
                sexName: [
                    { validator: validateSex, trigger: 'blur' }
                ],
                age: [
                    { required: true, message: '请输入年龄', trigger: 'blur' },
                    { type: 'number', message: '年龄必须为数字', trigger: 'blur' }
                ],
                provinceName: [
                    { required: true, message: '请输入省份名', trigger: 'blur' }
                ],
                cityName: [
                    { required: true, message: '请输入市名', trigger: 'blur' }
                ],
                districtName: [
                    { required: true, message: '请输入区(县)名', trigger: 'blur' },
                ],
                detail: [
                    { required: true, message: '请输入详细地址', trigger: 'blur' },
                ],
                phone: [
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                ],
                image: [
                    { required: true, message: '请输入图片', trigger: 'blur' },
                ],
                storeName: [
                    { required: true, message: '请输入店铺名', trigger: 'blur' },
                ],
            }
        }
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    updateOne(this.ruleForm).then(res => {
                        this.$message({
                            type: 'success',
                            message: res.message,
                            showClose: true
                        })
                        setTimeout(() => {
                            // 表单提交事件触发后自动触发父组件中的change
                            this.$emit('change', false)
                        }, 500);
                    }).catch(err => {
                        this.$message({
                            type: 'error',
                            message: err.message,
                            showClose: true
                        })
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    }
}
</script>